import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:toolbox/common/sizeConfig.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'browser_logic.dart';
import 'browser_state.dart';

class BrowserPage extends StatelessWidget {
  BrowserPage({Key? key}) : super(key: key);

  final BrowserLogic logic = Get.put(BrowserLogic());
  final BrowserState state = Get.find<BrowserLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Obx(() {
          if (state.progress.value == 100) {
            return const SizedBox();
          } else {
            return LinearProgressIndicator(
              value: state.progress.value / 100,
              backgroundColor: Colors.grey[300], // 进度条背景颜色
              valueColor: const AlwaysStoppedAnimation<Color>(Colors.blue), // 进度条颜色
            );
          }
        }),
        Expanded(child: WebViewWidget(controller: state.controller)),
        Container(
          width: double.infinity,
          height: 50 + SizeConfig.bottomMargin,
          decoration: BoxDecoration(color: AppBarTheme.of(context).backgroundColor),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children:[
              Obx(() => bottomButton(Icons.arrow_back_ios_new, logic.goBack, color: state.canGoBack.value ? Colors.blue : Colors.grey.shade400)),
              Obx(() => bottomButton(Icons.arrow_forward_ios, logic.goForward, color: state.canGoForward.value ? Colors.blue : Colors.grey.shade400)),
              bottomButton(Icons.home_outlined, logic.goHomePage, color: Colors.blue),
              bottomButton(Icons.refresh, logic.reload, color: Colors.blue),
              bottomButton(Icons.more_horiz, () => logic.onTapBookMark(context), color: Colors.blue),
            ]
          ),
        ),
      ],
    );
  }

  Widget bottomButton(IconData icon, Function()? onTap, {Color? color}) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: IconButton(onPressed: onTap, icon: Icon(icon), color: color,),
    );
  }
}
